<template>
	<view class="login">
		<image src="../../static/bj.png" class="login-image"></image>
		<view class="login-cont">
			<image src="../../static/logo.png" class="login-logo"></image>
			<!-- 东方华龙集团订餐系统 -->
			<view class="login-title">东方华龙集团订餐系统</view>
			<u-form :model="form" ref="uForm">
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="account" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.account" placeholder="请输入用户名" border='none'
							placeholderStyle='color: #fff' color='#fff' />
					</view>
				</u-form-item>
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="lock" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.password" :password="true" placeholder="请输入密码" border='none'
							placeholderStyle='color: #fff' color='#fff' />
					</view>
				</u-form-item>
				<view class="login-small-title">
					<u-checkbox-group v-model="checked">
						<u-checkbox v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"
							size="14" labelColor='#fff' labelSize='14' shape="square"></u-checkbox>
					</u-checkbox-group>
					<span @click="gotoUrl('forget')">忘记密码</span>
				</view>
				<view class="login-btn" @click="submit">登录</view>
				<view class="login-register" @click="gotoUrl('register')">新用户注册</view>
			</u-form>
			<view class="privacy">
				<u-checkbox-group v-model="checked2">
					<u-checkbox v-for="(item, index) in radiolist2" :key="index" :label="item.name" :name="item.name"
						size="14" labelColor='#fff' labelSize='14' shape="square"></u-checkbox>
				</u-checkbox-group>
				<navigator class="nav-box" url="/pages/entry/serviceAgreement">《服务协议》</navigator>
				和<navigator class="nav-box" url="/pages/entry/privacy">《隐私协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					account: '',
					password: ''
				},
				checked: [],
				radiolist: [{
					name: '记住密码'
				}],
				radiolist2: [{
					name: '我已阅读并同意'
				}],
				checked2: [],
			}
		},
		mounted() {
			this.form.account = this.$store.state.vuex_account ?? ''
			this.form.password = this.$store.state.vuex_pass ?? ''
			this.checked = this.$store.state.vuex_pass ? ['记住密码'] : []
			this.checked2 = this.$store.state.vuex_zhengce ? ['我已阅读并同意'] : []
		},
		methods: {
			// 登录
			submit() {
				let _this = this;
				if (_this.checked2.length === 0) {
					uni.showToast({
						title: '请阅读并同意《服务协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}
				// 校验
				if (!_this.form.account ||
					!_this.form.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在登录...'
				});
				login(_this.form).then(res => {
					uni.hideLoading();
					if (res.success) {
						_this.$u.vuex('vuex_info', res.data);
						_this.$u.vuex('vuex_account', _this.form.account);
						// 记住密码
						_this.$u.vuex('vuex_pass', _this.checked.length > 0 ? _this.form.password : null);
						// 记住政策
						_this.$u.vuex('vuex_zhengce', _this.checked2.length > 0 ? ['我已阅读并同意'] : null);
						// 自动登录（记住密码后）
						_this.$u.vuex('vuex_zidong', _this.checked.length > 0 ? 'zidong' : null);
						// console.log(_this.$store.state.vuex_info)
						// console.log(_this.$store.state.vuex_account)
						// console.log(_this.$store.state.vuex_pass)
						uni.reLaunch({
							url: '/pages/home/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			// 跳转注册
			gotoUrl(name) {
				uni.navigateTo({
					url: `/pages/login/${name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.privacy {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		width: 100%;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;

		.nav-box {
			color: #98FB98
		}
	}

	.login {
		height: 100vh;
		background-image: linear-gradient(45deg, #1D91D7, #32B1BD);

		.login-cont {
			position: absolute;
			top: 8%;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.login-logo {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
			}

			.login-title {
				color: #fff;
				margin: 40rpx auto;
				font-size: 60rpx;
				font-weight: bold;
				text-shadow: 2px 2px #333;
			}
		}

		.login-image {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
		}

		.login-btn {
			width: 80%;
			border-radius: 50rpx;
			text-align: center;
			color: #fff;
			margin: 8% auto 0;
			font-size: 36rpx;
			border: 1px solid #eee;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(to right, #32B1BD, #1D91D7);
		}

		.login-input {
			width: 80%;
			border-radius: 50rpx;
			color: #fff;
			margin: 0 auto;
			border: 1px solid #eee;
			height: 80rpx;
			line-height: 80rpx;
			background-color: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
		}

		.login-input-icon {
			margin: 0 20rpx;
		}

		.login-small-title {
			width: 75%;
			margin: 20rpx auto;
			font-size: 28rpx;
			text-align: right;
			color: #fff;
			display: flex;
			justify-content: space-between;
		}
		
		.login-register{
			color: #fff;
			text-align: center;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>